import React from 'react';
import Layout from 'antd/es/layout';
import { Row, Col, Card, Statistic, Progress } from 'antd';
import { UserOutlined, ShoppingCartOutlined, DollarOutlined, TeamOutlined, ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons';
import ReactECharts from 'echarts-for-react';
import styled, { keyframes } from 'styled-components';

const { Content } = Layout;

// 定义动画
const gradientAnimation = keyframes`
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
`;

const pulseAnimation = keyframes`
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
`;

const StyledLayout = styled(Layout)`
  min-height: 100vh;
  background: linear-gradient(-45deg, #001529, #003366, #002140, #001f3f);
  background-size: 400% 400%;
  animation: ${gradientAnimation} 15s ease infinite;
  overflow: hidden; /* 禁止页面滚动 */
`;

const StyledContent = styled(Content)`
  padding: 16px; /* 减小内边距以适应小屏幕 */
  height: 100%; /* 确保Content占满布局 */
`;

const StyledCard = styled(Card)`
  background: rgba(255, 255, 255, 0.05);
  border: none;
  backdrop-filter: blur(10px);
  transition: all 0.3s;
  height: 100%;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  }

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    &::before {
      animation: ${pulseAnimation} 2s infinite;
    }
  }

  .ant-card-head {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ant-card-head-title {
    color: #fff;
  }
  .ant-statistic-title {
    color: rgba(255, 255, 255, 0.65);
  }
  .ant-statistic-content {
    color: #fff;
  }
`;

const ChartContainer = styled.div`
  width: 100%;
  height: 100%;
  min-height: 200px;
`;

interface PieData {
  value: number;
  name: string;
  itemStyle: { color: string };
}

const HomeVisualData: React.FC = () => {
  const [data, setData] = React.useState({
    totalUsers: 0,
    activeUsers: 0,
    totalOrders: 0,
    revenue: 0,
    conversionRate: 0,
    userGrowth: 0,
  });

  // 模拟实时数据更新
  React.useEffect(() => {
    const timer = setInterval(() => {
      setData(() => ({
        totalUsers: Math.floor(Math.random() * 10000),
        activeUsers: Math.floor(Math.random() * 1000),
        totalOrders: Math.floor(Math.random() * 5000),
        revenue: Math.floor(Math.random() * 1000000),
        conversionRate: Math.random() * 100,
        userGrowth: Math.random() * 20 - 10,
      }));
    }, 3000);

    return () => clearInterval(timer);
  }, []);

  // 折线图配置
  const getLineChartOption = () => ({
    title: {
      text: '实时数据趋势',
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {
      data: ['用户数', '订单数'],
      textStyle: {
        color: '#fff',
      },
      top: 0,
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      top: 40,
    },
    xAxis: {
      type: 'category',
      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
      axisLabel: {
        color: '#fff',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
      },
    },
    series: [
      {
        name: '用户数',
        data: [820, 932, 901, 934, 1290, 1330, 1320, 1450],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        areaStyle: {
          opacity: 0.3,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(24, 144, 255, 0.8)' },
              { offset: 1, color: 'rgba(24, 144, 255, 0.1)' },
            ],
          },
        },
      },
      {
        name: '订单数',
        data: [420, 532, 501, 534, 890, 930, 920, 950],
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          width: 3,
        },
        areaStyle: {
          opacity: 0.3,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(82, 196, 26, 0.8)' },
              { offset: 1, color: 'rgba(82, 196, 26, 0.1)' },
            ],
          },
        },
      },
    ],
  });

  // 饼图配置
  const getPieChartOption = () => ({
    title: {
      text: '用户分布',
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: '#fff',
      },
    },
    series: [
      {
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['40%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: '新用户', itemStyle: { color: '#1890ff' } },
          { value: 735, name: '活跃用户', itemStyle: { color: '#52c41a' } },
          { value: 580, name: '沉睡用户', itemStyle: { color: '#faad14' } },
          { value: 484, name: '流失用户', itemStyle: { color: '#f5222d' } },
        ].map((point: PieData) => ({
          ...point,
          itemStyle: {
            ...point.itemStyle,
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2,
          },
        })),
      },
    ],
  });

  // 柱状图配置
  const getBarChartOption = () => ({
    title: {
      text: '销售趋势',
      textStyle: {
        color: '#fff',
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      top: 30,
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel: {
        color: '#fff',
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#fff',
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)',
        },
      },
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: '#1890ff' },
              { offset: 1, color: '#69c0ff' },
            ],
          },
          borderRadius: [4, 4, 0, 0],
        },
      },
    ],
  });

  return (
    <StyledLayout>
      <StyledContent>
        {/* 顶部统计卡片行 */}
        <Row gutter={[8, 8]}>
          <Col span="6">
            <StyledCard>
              <Statistic
                title="总用户数"
                value={data.totalUsers}
                prefix={<UserOutlined />}
                valueStyle={{ color: '#3f8600' }}
              />
              <Progress percent={data.conversionRate} showInfo={false} strokeColor="#3f8600" />
            </StyledCard>
          </Col>
          <Col span="6">
            <StyledCard>
              <Statistic
                title="活跃用户"
                value={data.activeUsers}
                prefix={<TeamOutlined />}
                valueStyle={{ color: '#cf1322' }}
              />
              <div style={{ color: data.userGrowth >= 0 ? '#3f8600' : '#cf1322' }}>
                {data.userGrowth >= 0 ? <ArrowUpOutlined /> : <ArrowDownOutlined />}
                {Math.abs(data.userGrowth).toFixed(1)}%
              </div>
            </StyledCard>
          </Col>
          <Col span="6">
            <StyledCard>
              <Statistic
                title="总订单数"
                value={data.totalOrders}
                prefix={<ShoppingCartOutlined />}
                valueStyle={{ color: '#1890ff' }}
              />
            </StyledCard>
          </Col>
          <Col span="6">
            <StyledCard>
              <Statistic
                title="总收入"
                value={data.revenue}
                prefix={<DollarOutlined />}
                valueStyle={{ color: '#faad14' }}
              />
            </StyledCard>
          </Col>
        </Row>

        {/* 图表行 */}
        <Row gutter={[8, 8]} style={{ marginTop: '16px' }}>
          <Col span="16">
            <StyledCard>
              <ChartContainer>
                <ReactECharts option={getLineChartOption()} style={{ height: '220px' }} />
              </ChartContainer>
            </StyledCard>
          </Col>
          <Col span="8">
            <StyledCard>
              <ChartContainer>
                <ReactECharts option={getPieChartOption()} style={{ height: '220px' }} />
              </ChartContainer>
            </StyledCard>
          </Col>
        </Row>

        {/* 底部大图表 */}
        <Row gutter={[8, 8]} style={{ marginTop: '16px' }}>
          <Col span="24">
            <StyledCard>
              <ChartContainer>
                <ReactECharts option={getBarChartOption()} style={{ height: '250px' }} />
              </ChartContainer>
            </StyledCard>
          </Col>
        </Row>
      </StyledContent>
    </StyledLayout>
  );
};

export default HomeVisualData;


